<section class="component">
  <h3 id="dropdown">Dropdown</h3>
  <div>
    <blockquote>
      A <em>drop-down list box</em> allows the selection of only a
      single item from a list. In its closed state, the control displays
      the current value for the control. The user opens the list to change
      the value.

      <footer>
        &mdash; Microsoft Windows User Experience p. 175
      </footer>
    </blockquote>

    <p>
      Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
      elements.
    </p>

    <%- example(`
      <select>
        <option>5 - Incredible!</option>
        <option>4 - Great!</option>
        <option>3 - Pretty good</option>
        <option>2 - Not so great</option>
        <option>1 - Unfortunate</option>
      </select>
    `) %>

    <p>
      By default, the first option will be selected. You can change this by
      giving one of your <code>option</code> elements the <code>selected</code>
      attribute.
    </p>

    <%- example(`
      <select>
        <option>5 - Incredible!</option>
        <option>4 - Great!</option>
        <option selected>3 - Pretty good</option>
        <option>2 - Not so great</option>
        <option>1 - Unfortunate</option>
      </select>
    `) %>

    <p>
      Disabled dropdown.
    </p>

    <%- example(`
      <select disabled>
        <option>0 - Dropdown disabled</option>
      </select>
    `) %>
  </div>
</section>